<template>
	<view class="min100 bg" style="padding-bottom:240rpx;">
		<view class="plr-30">
			<!-- 头部 -->
			<view class="topWrap white">
				<img :src="info.images" class="collectImg">
				<image src="../../static/preview.png" class="preImg" @click="preShow=true"></image>
				<view class="text-center topContent">
					<view class="size-34 mb-22 white">
						{{info.name}}
					</view>
					
					<view class="flex flex-start size-22" style="margin:0  100rpx;">
						<view class="tipsLeft mr-16 text-center ptb-7 radius-6" style="width:128rpx;color: #fff;">
							{{info.goods_category_name}}
						</view>
						<view class="flex flex-start  mr-16" style="width:200rpx">
							<view class="tipsLeft text-center ptb-7 radius-6" style="width:84rpx;color: #fff;">
								限量
							</view>
							<view class="tipsRight red ptb-7 text-center" style="border-radius:0 6rpx 6rpx 0;width:116rpx">
								{{info.stock}}份
							</view>
						</view>
						<view class="tipsRight ptb-7 red radius-6" style="width:128rpx;">
							{{info.label}}
						</view>
					</view>
<!-- 					<view class="flex flex-start flex-center center identifyWrap">
						<image src="../../static/identify.png" class="identifyImg"></image>
						<view class="radius-6 ptb-7 pl-20 size-24 gray">
							HX{{info.goods_number}}#{{info.goods_num}}/{{info.stock}}
						</view>
					</view> -->
				</view>
			</view>
			<view class="plr-30 ptb-30 size-24 white mb-30">
				<view class="red size-50 bold">
					￥{{info.price}}
				</view>
				<view class="flex flex-start mt-20">
					<image :src="info.author_image" class="userImg mr-20"></image>
					<view class="">
						<view class="">
							创作者
						</view>
						<view class="mt-10 white flex">
							{{info.author_name}}
							<view v-if="info.goods_num">
								（{{info.goods_num}}）
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 介绍 -->
			<view class="radius-20 plr-30 pt-30 size-24 white authCon pb-10">
				<view class="flex mb-30">
					<view class="">
						合约地址
					</view>
					<view class="flex" style="width:70%" @click="copyAddress(info.contract)">
						<view class="rightText bold text-ellipsis red" style="width:90%">
							{{info.contract}}
						</view>
						<image class="copyImg ml-20" src="../../static/copy.png" mode=""></image>
					</view>
				</view>
				<view class="flex mb-30">
					<view class="">
						认证标识
					</view>
					<view class="flex" style="width:70%" @click="copyAddress(info.meta_data)">
						<view class="rightText bold text-ellipsis red" style="width:90%">
							{{info.meta_data}}
						</view>
						<image class="copyImg ml-20" src="../../static/copy.png" mode=""></image>
					</view>
				</view>
				<view class="flex mb-30">
					<view class="">
						认证标准
					</view>
					<view class="flex">
						<view class="red bold">
							{{info.attribute}}
						</view>
					</view>
				</view>
				<view class="flex mb-30">
					<view class="">
						认证网络
					</view>
					<view class="flex">
						<view class="red bold">
							{{info.network_name}}
						</view>
					</view>
				</view>
				<view class="flex mb-30">
					<view class="">
						发行方
					</view>
					<view class="flex">
						<view class="red bold">
							{{info.issuer}}
						</view>
					</view>
				</view>
			</view>
			<!-- 介绍 -->
			<view class="radius-20 mt-30 plr-30 ptb-30">
				<view class="mb-30 size-30 white">
					作品故事
				</view>
				<view class="white infoWrap" v-html="info.content">

				</view>
			</view>
			<view class="radius-20 mt-30 plr-30 ptb-30">
				<view class="mb-30 size-30 white">
					购买须知
				</view>
				<view class="white infoWrap" v-html="info.buy_content">

				</view>
			</view>
		</view>
		
		<view class="btmWrap flex flex-between pb-40 plr-30 pt-40" v-if="info.status==1||info.status==2">
			<!-- <button hover-class="none" class="transBtn mr-20" v-if="info.status==1||info.status==2"
				@click="transferShow=true">转赠</button> -->
			<button hover-class="none" class="saleBtn" @click="toSale()" v-if="info.status==1&&is_trade==1">出售</button>
			<button hover-class="none" class="saleBtn ml-20" @click="upCollect()" v-if="info.status==2">
				<text v-if='info.is_show==1'>下架</text>
				<text v-if='info.is_show==0'>上架</text>
			</button>
			<button type="primary" class="transBtn ml-20" hover-class="none" v-if="info.status==1||info.status==2"
				@click="toChange()">改价</button>
		</view>
		<!-- 预览图片 -->
		<u-popup v-model="preShow" mode='center' border-radius='20'>
			<view>
				<img :src="info.images" class="collectPreImg">
			</view>
		</u-popup>
		<!-- 转赠 -->
		<u-popup v-model="transferShow" mode="center" border-radius="20">
			<view class="plr-30 ptb-30">
				<view class="text-center bold size-32 bold">转赠</view>
				<u-field v-model="transferPhone" label-width="0" placeholder="请输入受赠人手机号" />
				<!-- <u-field v-model="saleMoney" label-width="0" type="password" placeholder="请输入交易密码" /> -->
				<u-button @click="submitTransfer" hover-class="none" type="primary" class="mt-30">确认</u-button>
			</view>
		</u-popup>
		<!--出售 -->
		<u-popup v-model="saleShow" width="90%" mode="center" border-radius="20">
			<view class="plr-30 ptb-30">
				<view class="text-center bold size-32 bold">出售详情</view>
				<u-field v-model="salePrice" @input="getShowInput" label="出售价格(￥)" label-width="180" placeholder="请输入价格"
					type="number" />
				<view class="flex flex-between mt-20 size-22 white pl-30">
					<view class="">
						平台服务费{{saleConfig.terrace_rate}}%：
					</view>
					<view class="">
						-￥{{terracePrice.toFixed(2)}}
					</view>
				</view>
				<view class="flex flex-between mt-20 size-22 white pl-30">
					<view class="">
						作品版税{{saleConfig.author_rate}}%：
					</view>
					<view class="">
						-￥{{authorPrice.toFixed(2)}}
					</view>
				</view>
				<view class="flex flex-between mt-20 size-22 white pl-30">
					<view class="">
						支付通道使用费{{saleConfig.pay_rate}}%：
					</view>
					<view class="">
						-￥{{payPrice.toFixed(2)}}
					</view>
				</view>
				<view class="flex flex-between mt-20 size-22 white pl-30">
					<view class="">
						商品出售所得：
					</view>
					<view class="">
						￥{{realPrice.toFixed(2)}}
					</view>
				</view>
				<u-button style="width:590rpx" hover-class="none" type="primary" class="mt-30" @click="submitSale">确认
				</u-button>
			</view>
		</u-popup>
		
		<!-- 输入密码 -->
		<u-keyboard @change="onChange" ref="uKeyboard" v-model="showKeyboard" @backspace="onBackspace" mode="number" :dot-enabled="false" :tooltip="false" default="">
			<view style="text-align: center;">
				请输入密码
			</view>
			<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password" :disabled-keyboard="true" @finish="finish"></u-message-input>
		</u-keyboard>
		<!-- 改价 -->
		<u-popup v-model="changeShow" width="90%" mode="center" border-radius="20">
			<view class="plr-30 ptb-30">
				<view class="text-center bold size-32 bold">改价详情</view>
				<u-field v-model="afterPrice" @input="getShowInput" label="价格(￥)" label-width="180" placeholder="请输入价格"
					type="number" />
				<view class="flex flex-between mt-20 size-22 white pl-30">
					<view class="">
						平台服务费{{saleConfig.terrace_rate}}%：
					</view>
					<view class="">
						-￥{{terracePrice.toFixed(2)}}
					</view>
				</view>
				<view class="flex flex-between mt-20 size-22 white pl-30">
					<view class="">
						作品版税{{saleConfig.author_rate}}%：
					</view>
					<view class="">
						-￥{{authorPrice.toFixed(2)}}
					</view>
				</view>
				<view class="flex flex-between mt-20 size-22 white pl-30">
					<view class="">
						支付通道使用费{{saleConfig.pay_rate}}%：
					</view>
					<view class="">
						-￥{{payPrice.toFixed(2)}}
					</view>
				</view>
				<view class="flex flex-between mt-20 size-22 white pl-30">
					<view class="">
						商品出售所得：
					</view>
					<view class="">
						￥{{realPrice.toFixed(2)}}
					</view>
				</view>
				<u-button style="width:590rpx" hover-class="none" type="primary" class="mt-30" @click="submitChange">确认
				</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showKeyboard: false,//密码输入的显示隐藏
				password: '',//输入的密码
				preShow: false,
				id: "",
				info: {},
				is_trade: 0,
				changeShow: false,
				afterPrice: '',
				transferPhone: '',
				transferShow: false,
				salePrice: '',
				saleShow: false,
				saleConfig: {},
				terracePrice: 0,
				authorPrice: 0,
				payPrice: 0,
				realPrice: 0,
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.init();
			this.$http('api/login/helpContent').then(res => {
				this.is_trade = res.is_trade;
			})
			this.$http('api/index/fee').then(res => {
				this.saleConfig = res;
			})
		},
		methods: {
			finish() {
				this.$http('api/user/checkTradePass', {
				  pass:this.password
				}).then(res => {
					if(res.is_check==0){
						uni.showToast({
							title: "密码错误",
							icon: 'none'
						})
						return;
					}else if(res.is_check==1){
						this.$http('api/orders/goodsSale', {
							id: this.id,
							price: this.salePrice
						}, 'POST').then(res => {
							uni.showToast({
								title: "出售成功!",
								icon: "none"
							})
							setTimeout(() => {
								uni.navigateTo({
									url: './myCollect?current=' + 2 + "&status=2"
								})
							}, 1000)
							// this.$http('/api/orders/tradeGoods', {
							// 	users_goods_id: this.users_goods_id
							// }).then(res => {
							// 	this.btnDisabled = false;
							// 	uni.navigateTo({
							// 		url: '../pay/collectPay?order_id=' + res.order_id
							// 	})
							})
					}
				});
				this.showKeyboard = false;
				
				//可以放请求的接口及付款后的判断等
			},
			onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
			onChange(val) {
				if (this.password.length < 6) {
					this.password += val;
				}
			
				if (this.password.length >= 6) {
					this.finish();//封装的结束函数，我是在后续还有请求接口和判断等
				}
			},
			toChange() {
				this.changeShow = true;
				this.afterPrice = this.info.price
				this.getShowInput(this.afterPrice);
			},
			toSale() {
				this.saleShow = true;
				this.salePrice = this.info.price;
				this.getShowInput(this.salePrice);
			},
			getShowInput(e) {
				let saleConfig = this.saleConfig;
				this.terracePrice = e * saleConfig.terrace_rate / 100;
				this.authorPrice = e * saleConfig.author_rate / 100;
				this.payPrice = e * saleConfig.pay_rate / 100;
				this.realPrice = e - this.terracePrice - this.authorPrice - this.payPrice;
			},
			init() {
				this.$http('api/orders/usersGoodsDetail', {
					id: this.id
				}).then(res => {
					this.info = res;
				})
			},
			// 复制
			copyAddress(val) {
				// #ifdef APP-PLUS
				uni.setClipboardData({
					data: val,
					success: function() {
						uni.hideToast()
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '复制成功',
									icon: 'none'
								})
							}
						});
					}
				});
				// #endif
				// #ifdef H5
				let that = this;
				this.$copyText(val).then(function(e) {
					uni.showToast({
						title: "复制成功!",
						icon: "none"
					})
				}, function(e) {
					uni.showToast({
						title: "复制失败!",
						icon: "none"
					})
				})
				// #endif
			},

			// 转增
			submitTransfer() {
				if (this.transferPhone == "") {
					uni.showToast({
						title: "请输入受赠人手机号!",
						icon: "none"
					})
					return;
				}
				this.$http('api/orders/goodsTransfer', {
					id: this.id,
					phone: this.transferPhone
				}, 'POST').then(res => {
					uni.showToast({
						title: "转赠成功!",
						icon: "none"
					})
					this.transferShow = false;
					this.transferPhone = '';
					setTimeout(() => {
						uni.navigateTo({
							url: './myCollect?current=' + 5 + "&status=5"
						})
					}, 500)
				})
			},
			// 出售
			submitSale() {
				if (this.salePrice == "") {
					uni.showToast({
						title: "请输入价格!",
						icon: "none"
					})
					return;
				}
					this.saleShow = false;
					this.$http('api/user/isTradePass', {
					}).then(res => {
						console.log(uni.getStorageSync('psd'))
						if(res.is_trade==0){//判断是否设置过密码
							console.log('去设置密码')
							uni.showModal({
								title: '提示',
								content: '还未设置密码，去设置密码',
								success: function (res) {
									if (res.confirm) {
										uni.navigateTo({
										  url:'./password'
										});
									} else if (res.cancel) {
									}
								}
							});
						}else if(res.is_trade==1){
							this.showKeyboard = true;
							this.password='';//唤醒输入组件时清空密码
							
						}
					})
					
				// 	setTimeout(() => {
				// 		uni.navigateTo({
				// 			url: './myCollect?current=' + 2 + "&status=2"
				// 		})
				// 	}, 500)
				// })
			},
			//上架
			upCollect() {
				let _this = this;
				let msg = _this.info.is_show == 1 ? '下架?' : '上架?';
				uni.showModal({
					title: '提示',
					content: "将此藏品" + msg,
					success: function(res) {
						if (res.confirm) {
							_this.$http('api/orders/goodsUpdateShow', {
								id: _this.id,
								is_show: _this.info.is_show == 1 ? 0 : 1
							}, 'POST').then(res => {
								uni.showToast({
									title: "操作成功!",
									icon: "none"
								})
								_this.init();
							})
						} else if (res.cancel) {
							uni.showToast({
								title: "取消操作!",
								icon: "none"
							})
						}
					}
				});
			},
			// 改价
			submitChange() {
				if (this.afterPrice == "") {
					uni.showToast({
						title: "请输入价格!",
						icon: "none"
					})
					return;
				}
				this.$http('api/orders/goodsUpdatePrice', {
					id: this.id,
					price: this.afterPrice
				}, 'POST').then(res => {
					uni.showToast({
						title: "改价成功!",
						icon: "none"
					})
					this.changeShow = false;
					this.init();
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.userImg {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.buyBtn {
		font-size: 28rpx;
		color: #fff;
		line-height: 80rpx;
		height: 80rpx;
		background: #44ACFF;
		border-radius: 40rpx;
		width: 210rpx;
	}


	.copyImg {
		width: 24rpx;
		height: 24rpx;
	}

	.btmWrap {
		position: fixed;
		z-index: 10;
		width: 100%;
		bottom: 0;
		// background: #fff;
		uni-button {
			width: 30%;
			height: 80rpx;
			border-radius: 25rpx;
			font-size: 24rpx;
			line-height: 80rpx;
		}

		.transBtn {
			color: #fff;
			background: #44ACFF;
		}

		.saleBtn {
			color: #44ACFF;
			background: transparent;
			border: 1rpx solid #44ACFF;
		}
	}

	.tipsLeft {
		background: #44ACFF;
		color: #2f2f2e;
	}

	.collectImg {
		width: 75%;
		display: block;
		margin: 0 auto;
		height: auto;
		position: relative;
	}


	.tipsRight {
		background: rgba(239, 170, 28, .3);
	}

	.topWrap {
		padding-top: 121rpx;
		background: url(../../static/detailsBg.png) 0 0 no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 926rpx;
		position: relative;
	}


	.infoWrap {

		::v-deep  img {
			width: 100% !important;
			height: auto;
		}
	}

	.itemTips {
		font-size: 28rpx;
		background: #DEE4E8 !important;
		border-radius: 40rpx;
	}

	.topContent {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 30rpx;
		z-index: 10;
		width: 100%;
		text-align: center;
	}

	.identifyWrap {
		position: relative;
		width: 300rpx;
		margin: 0 auto;
		background: linear-gradient(270deg, #F0E3B6 0%, #BEA35B 100%);
		border-radius: 6px;
	}

	.identifyImg {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		z-index: 100;
		top: 2rpx;
		left: -14rpx;
	}
</style>
